<template>
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>

  <!-- 
    类似有一个消息中心，组件A往该消息中心中订阅了某消息，然后一旦消息组件B往该消息中发布该消息，组件A会立马收到该消息，并执行相应回调。

    ## 消息订阅与发布（pubsub）（之前总线多个同名的会覆盖，订阅的话可以多个订阅同名事件）

1.   一种组件间通信的方式，适用于任意组件间通信

2. 使用步骤：

   1. 安装pubsub：```npm i pubsub-js```

   2. 引入: ```import pubsub from 'pubsub-js'```

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
      methods(){
        demo(data){......}
      }
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }

   4. 提供数据：```pubsub.publish('xxx',数据)```

   5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去取消订阅。
   -->
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "School",
  data: function () {
    return {
      name: "尚硅谷123",
      address: "北京",
    };
  },
  mounted() {
    /*订阅消息
      使用pubsub.subscribe函数进行订阅，第一个参数是消息名称，第二个函数时回调方法。
      回调方式如果直接定义的话，最好使用箭头函数，这样能保证this指向当前组件实例对象，如果使用普通函数，this是undefined。
      如果不使用箭头函数，那么可以把回调函数定义在vue组件的methods配置项里面。
      回调函数的第一个参数是消息名称，第二个参数开始才是消息发布时传的数据，传递两个及以上的数据用[]或{}包裹
     */
    this.pid = pubsub.subscribe("hello", (msg, data) => {
      //类似于定时器，订阅消息时会返回一个id用于取消该订阅
      console.log("有人发布了消息，收到的数据为:", msg, data, this);
    });
  },
  beforeDestroy() {
    //通常在组件销毁时，取消消息订阅
    //使用pubsub.unsubscribe
    //该方法传入一个消息订阅返回的Id，取消多个订阅用数组将id包裹
    pubsub.unsubscribe(this.pid);
  },
};
</script>

<style lang="less" scoped>
.school {
  background-color: green;
  margin-top: 30px;
}
</style>